<template>
<view class="mask"  :catchtouchmove="true" v-if="show">
  <view class="couponBox" >
    <view class="oval"/>
    <image class="couponGift.png" src="https://www.zjjqf.cn/file/static/couponGift.png" />
    <view class="content">
      <view class="jml">新人见面礼</view>
      <view class="jx"><span class="text">请查收惊喜</span></view>
      <view class="couponList">
        <scroll-view style="height: 375rpx;"  :show-scrollbar="false" class="scroll-Y" :scroll-top="scrollTop" enhanced scroll-y="true" >
        <view class="redcoupon" v-for="item in couponList">
          <view class="coupon flex " v-if="item.type === 1">
            <view class="amount">{{ item.deductAmount }}</view>
            <view class="decrement flex flex-column">
              <text>
                {{ item.deductAmount }}元优惠券
              </text>
              <view class="flex remarks">
                <view class="remark">{{ item.effectAmount?`满${ item.effectAmount }元立减`:'无门槛红包'}}</view>
                <view class="remark">全站可用</view>
              </view>
            </view>
          </view>
            <view class="coupon flex " v-else>
                <view class="swq">实物券</view>
                <view class="decrement flex flex-column">
                    <view class="goodsName">
                        {{ item.name }}
                    </view>
                    <view class="flex remarks">
                        <view class="remark">{{ `满${ item.effectAmount }元立送`}}</view>
                        <view class="remark">全站可用</view>
                    </view>
                </view>
            </view>
        </view>
        </scroll-view>
      </view>
      <view class="path6">
        <image src="https://www.zjjqf.cn/file/static/path6.png"/>
      </view>
      <view class="draw" @tap="draw">
        一键领取
      </view>
      <view class="close" @click="closeCoupon">
        <image src="http://121.41.75.32:8002/file/static/guanbixiao.png"/>
      </view>
    </view>
  </view>
</view>
</template>

<script>
export default {
  name: "couponPopup",
  props:{
    show:{
      type:Boolean,
      default:false
    },
    couponList:{
      type:Array,
      default:()=>[]
    }
  },
  computed:{
    getGoodsName(){
        return
    }
  },
  methods:{
    closeCoupon(){
      this.$emit('update:show',false)
    },
    draw(){
      this.$emit('draw')
    }

  }
}
</script>

<style lang="scss" scoped>
.mask{
  display: flex;
 .couponBox{
   width: 584rpx;
   height: 900rpx;
   position: relative;
   .couponGift{
     position: absolute;
     z-index: 3;
     width: 587rpx;
     height: 406rpx;
     top:-72rpx
   }
   .oval{
     width: 100%;
     height: 200rpx;
     background: #EB2627;
     top: 100rpx;
     position: absolute;
     border-radius: 100%;
     z-index: 2;
   }
   .content{
     width: 100%;
     height: 700rpx;
     background: #FA4747 ;
     position: absolute;
     bottom: 0;
     z-index: 1;
     .jml{
       color: white;
       width: 100%;
       margin-top: 120rpx;
       display: flex;
       justify-content: center;
       font-size: 50rpx;
       font-weight: bold;
       letter-spacing: 10rpx;
     }
     .jx{
       color: rgb(255, 255, 255,0.5);
       width: 100%;
       display: flex;
       justify-content: center;
       .text{
         &:after,&:before{
           content: '';
           border-bottom: rgb(255, 255, 255,0.5) 1px solid;
           display: inline-block;
           width: 90rpx ;
           height: 20rpx;
           margin: 0 20rpx 10rpx;

         }
       }

     }
     .couponList{
       width: 495rpx;
       height: 375rpx;
       background: white;
       margin: 30rpx 50rpx;
       border-radius: 30rpx;
       padding: 3rpx;
       .redcoupon{
         width: 470rpx;
         height: 150rpx;
         background: #F54546;
         border-radius: 21rpx;
         display: flex;
         margin: 10rpx auto;

         .coupon{
           width: 450rpx;
           height: 130rpx;
           border-radius: 12rpx;
           margin: auto;
           background: white;
           position: relative;
           .swq{
             color: #FA4747;
             height: 100%;
             width: 160rpx;
             display: flex;
             justify-content: center;
             align-items: center;
             font-size: 30rpx;
             font-weight: bold;
             position: relative;
           }
           .amount{
             color: #FA4747;
             height: 100%;
             width: 160rpx;
              display: flex;
             justify-content: center;
             align-items: center;
             font-size: 60rpx;
             font-weight: bold;
             position: relative;
             &:before{
               content: '￥';
               font-size: 30rpx;
             }
             &:after{
               content: '';
               display: block;
               height: 38rpx;
               border-right: rgba(253, 48, 40, 0.1) 1rpx solid;
               position: absolute;
               right: 0;
             }
           }
           &:before{
             content: '';
             display: inline-block;
             position: absolute;
             width: 20rpx;
             height: 40rpx;
             background: #F54546;
             border-radius:0 60rpx 60rpx 0;
             top: 50rpx;
           }
           &:after{
             content: '';
             display: inline-block;
             width: 20rpx;
             height: 40rpx;
             background: #F54546;
             border-radius:60rpx 0 0 60rpx;
             margin-top: 50rpx;
             position: absolute;
             top: 0;
             right: 0;
           }
         }
         .decrement{
          font-weight: bold;
           font-size: 33rpx;
           width: 250rpx;
           display: flex;
           justify-content: center;
           margin-left: 20rpx;
           .goodsName{
             font-size: 30rpx;
             width: 200rpx;
             margin-bottom: 20rpx;
           }
           .remarks{
             font-size: 15rpx;
             .remark{
               padding: 10rpx;
               background: #FBEAB9;
               color:#DEA605;
               margin-right: 10rpx;
             }
           }
         }

       }
     }
     .draw{
       width: 438rpx;
       height: 61rpx;
       background: linear-gradient(180deg, #FDDB6B 1%, #FDC43A 100%);
       position: absolute;
       bottom: 20rpx;
       box-shadow: inset 0px -1px 3px 0px rgba(255,255,255,0.5);
       border-radius: 31rpx;
       color: #AA4301;
       font-size: 35rpx;
       font-weight: bold;
       display: flex;
       justify-content: center;
       align-items: center;
       left: 80rpx;
     }

   }
   .path6{
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 150rpx;

     image{
       width: 600rpx;
       height: 150rpx;
       margin-left: -10rpx;
     }
   }
   margin: auto;
 }
}
.close{
  position: absolute;
 bottom: -100rpx;
  left: 260rpx;
  image{
    width: 50rpx;
    height: 50rpx;
  }
}
</style>
